<template>
  <div style="min-width: 809px">
    <!-- 页面底部有总金额，参考原型 -->
    <div v-if="$route.path == '/storeCommissionList'">
      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="月份">
            <el-date-picker
              style="width: 250px"
              v-model="paging.date"
              type="month"
              placeholder="请选择"
              @change="changeDate"
            >
            </el-date-picker>
            <!-- <el-date-picker
              v-model="paging.date"
              style="width: 250px"
              type="daterange"
              range-separator="到"
              start-placeholder="开始日期"
              placeholder="请选择"
              end-placeholder="结束日期"
            >
            </el-date-picker> -->
          </el-form-item>
          <el-form-item label="门店：">
            <el-select
              v-model="paging.store_id"
              placeholder="请选择"
              style="width: 250px"
              @change="changesShop"
            >
              <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="店长：">
            <el-select
              v-model="paging.staff_id"
              placeholder="请选择"
              style="width: 250px"
            >
              <el-option
                v-for="item in shopList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <div class="operation-box clear-float">
          <el-button
            icon="el-icon-upload2"
            @click="exportFile()"
            :loading="isExport"
            >导出</el-button
          >
          <el-button @click="configuration()" type="primary"
            >店长提成配置</el-button
          >
        </div>
        <el-table
          v-loading="loading"
          :data="tableData"
          show-summary
          :summary-method="getTotal"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
          max-height="650"
        >
          <el-table-column label="序号" width="80" prop="id"> </el-table-column>
          <el-table-column label="门店" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.store.title }} </span>
            </template>
          </el-table-column>
          <el-table-column label="月份" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.royalty.date }}</span>
            </template>
          </el-table-column>
          <el-table-column label="店长" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.name }} ({{ scope.row.number }})</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="money"
            label="实际完成业绩（元）"
            min-width="150"
          >
          </el-table-column>
          <el-table-column
            prop="basics"
            label="基础业绩目标（元）"
            min-width="150"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.royalty.basics }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="basics_ratio"
            label="基础提成比列"
            min-width="150"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.royalty.basics_ratio }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="board"
            label="跳板业绩目标（元）"
            min-width="150"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.royalty.board }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="board_ratio"
            label="跳板提成比例"
            min-width="150"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.royalty.board_ratio }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="royalty_money"
            label="提成金额（元）"
            min-width="150"
          >
          </el-table-column>
        </el-table>
        <!-- <div class="vs-paging-box">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="paging.page"
            :page-size="paging.limit"
            layout="prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div> -->
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recordList: [],
      loading: false,
      loading2: false,
      isBtn: false,
      isInfo: false,
      dialogVisible: false,
      isExport: false,
      paging: {
        id: "",
        store_id: "",
        date: "",
        staff_id: "",
      },
      form: {
        date: "",
      },
      tableData: [],
      storeList: [],
      shopList: [],
    };
  },
  created() {
    if (this.$route.path == "/storeCommissionList") {
      this.handleCurrentChange(1);
      this.getAllStoreList();
      this.getShopOwner();
      var date = new Date();
      this.paging.date = this.utils.timeMonth(date);
    }
  },
  methods: {
    configuration() {
      this.utils.goUrl("/storesCut");
    },
    // 导出文件
    async exportFile() {
      this.isExport = true;
      let res = await this.$Http.exportShopOwnerShape(this.paging);
      this.utils.downloadXlsx(res, "店长提成列表");
      this.isExport = false;
    },
    getTotal(param) {
      const { columns, data } = param;
      const sums = [];
      console.log(columns, data);
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        //calcProp 为需要计算的列的prop值的集合
        const calcProp = ["royalty_money"];
        if (calcProp.includes(column.property)) {
          const values = data.map((item) => Number(item[column.property]));
          console.log(values, "values");
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              console.log(2);

              return prev;
            }
          }, 0);
        }
      });
      let arr = [];
      sums.forEach((ele, i) => {
        if (i != 0 && i != 15) {
          sums[i] = Number(ele).toFixed(2);
        }
        // console.log(ele,"444444444")
        // ele = ele.toFixed(2)
      });
      console.log(sums, "sumssumssumssumssumssumssumssums");
      return sums;
    },
    changeDate(e) {
      this.paging.date = this.utils.timeMonth(e);
    },
    // 获取全部门店
    async getAllStoreList() {
      let { code, data } = await this.$Http.homegetStore();
      if (code) {
        this.storeList = data;
      }
    },
    // 获取店长列表
    async getShopOwner() {
      let { code, data } = await this.$Http.getShopOwner({
        store_id: this.paging.store_id,
      });
      if (code) {
        this.shopList = data;
      }
    },
    // 选择门店联动店长
    changesShop(e) {
      this.shopList = [];
      this.paging.staff_id = "";
      this.getShopOwner();
    },
    async setRow(type, row) {
      this.utils.goUrl("/goodsOrderInfo?type=" + type);
      return;
      if (type == 1) {
        this.dialogVisible = true;
        setTimeout(() => {
          this.ruleForm = Object.assign({}, row);
        }, 200);
      } else if (type == 2) {
        this.isInfo = true;
        this.loading2 = true;
        let { code, data } = await this.$Http.catdistribution({
          id: row.id,
        });
        this.loading2 = false;
        if (code) {
          this.recordList = data;
        } else this.recordList = [];
      }
    },
    handleClose(dom) {
      this.$refs["ruleForm"].resetFields();
      this.dialogVisible = false;
      dom && dom();
    },
    async repairGetList() {
      this.loading = true;
      let { code, data } = await this.$Http.shopOwnerShape(this.paging);
      this.loading = false;
      if (code) {
        this.tableData = data;
        // this.paging.total = data.total;
      }
    },
    reset() {
      //重置
      this.paging = this.$options.data().paging;
      var date = new Date();
      this.paging.date = this.utils.timeMonth(date);
      this.form.date = "";
      this.handleCurrentChange(1);
    },
    handleSizeChange(val) {
      this.paging.limit = val;
      this.repairGetList();
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.repairGetList();
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}
::v-deep {
  .el-table {
    position: relative;
    overflow: inherit;
  }
  .el-table__footer-wrapper {
    background: #f5f7fa;
    position: absolute;
    top: -50px;
  }
  .el-table__fixed-footer-wrapper tbody td {
    position: absolute;
  }
}
.operation-box {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 70px;
}
</style>